<template>
  <div id="welcome">
    <Loading v-if="!model.backgroundImg"></Loading>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>欢迎页面编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form label-width="120px" :model="model">
      <el-tabs type="border-card">
        <el-tab-pane label="图片页">
          <el-form-item label="标题">
            <el-input v-model="model.title"></el-input>
          </el-form-item>
          <el-form-item label="欢迎语">
            <el-input v-model="model.welcome"></el-input>
          </el-form-item>
          <el-form-item label="背景图">
            <el-upload
              :action="baseURL + '/upload'"
              :show-file-list="false"
              :on-success="afterImgUpoad"
            >
              <img v-if="model.backgroundImg" :src="model.backgroundImg" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="视频页">
          <el-form-item label="标题">
            <el-input v-model="model.title2"></el-input>
          </el-form-item>
          <el-form-item label="特点1">
            <el-input v-model="model.feature1"></el-input>
          </el-form-item>
          <el-form-item label="特点2">
            <el-input v-model="model.feature2"></el-input>
          </el-form-item>
          <el-form-item label="特点3">
            <el-input v-model="model.feature3"></el-input>
          </el-form-item>
          <el-form-item label="视频地址">
            <el-input v-model="model.videoUrl"></el-input>
          </el-form-item>
          <!-- <el-form-item label="GIF图">
            <el-upload
              :action="baseURL + '/upload'"
              :show-file-list="false"
              :on-success="afterImgUpoad"
            >
              <img v-if="model.gifUrl" :src="model.gifUrl" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item> -->
        </el-tab-pane>
      </el-tabs>

      <el-form-item>
        <el-button type="primary" @click="save" class="mt10">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { postData, getData, baseURL, putData } from "../../services/http";
import { onBeforeMount } from "@vue/runtime-core";
export default {
  name: "Welcome",
  setup() {
    const state = reactive({
      model: {
        title: "",
        welcome: "",
        backgroundImg: "",
        title2: "",
        videoUrl: "",
      },
    });
    const stateAsRefs = toRefs(state);

    const getWelcome = async () => {
      const { data: res } = await getData("rest/welcome");
      if (res.data.length) {
        state.model = res.data[0];
        return;
      }
    };

    onBeforeMount(async () => {
      getWelcome();
    });
    const save = () => {
      const id = state.model._id;
      if (id) {
        return putData(`rest/welcome/${id}`, state.model, "修改欢迎页成功");
      }
      postData("rest/welcome", state.model, "保存欢迎页成功");
      getWelcome();
    };
    const afterImgUpoad = (res) => {
      state.model.backgroundImg = res.url;
    };
    return {
      ...stateAsRefs,
      afterImgUpoad,
      save,
      baseURL,
    };
  },
};
</script>